<template>
  <div class="content">
    <div class="content-item" v-for="(item,index) in list" :key="index" @click="openRouter(item.id)">
        <div class="item-content" :class="indeid==item.id?'itemblgcolor':''">
        <div class="item-left" >
      {{item.text}}
        </div>
        <div class="item-right">
        <i class="el-icon-arrow-down" v-if="indeid!=item.id"></i>
        <i class="el-icon-arrow-up" style="color: #fff" v-if="indeid==item.id"></i>
        </div>
        </div>
        <template v-if="indeid==item.id">
       <div class="item-cahilder" v-for="(chilitem,index) in item.char" :key="index" >
           <div class="item-cahilder">{{chilitem.text}}</div>
       </div>
      </template>
    </div>

  </div>
</template>

<script>
export default {
    data(){
     return{
        indeid:2,   
       list:[{
           id:1,
           text:"系统首页",
   
       },
       {
           id:2,
           text:"单位概况",
           char:[
               {
                   text:"基本情况"
               },
               {
                   text:"组织架构"
               },
               {
                   text:"力量编线"
               },
               {
                   text:"历史沿革"
               },
           ]
       },
       {
           id:3,
           text:"储备新模式方案",
   
       },
       {
           id:4,
           text:"资管新闻",
   
       },
       {
           id:5,
           text:"政策法规",
   
       },
       {
           id:6,
           text:"党建工作",
   
       },
       {
           id:7,
           text:"综合计划",
   
       },
        {
           id:8,
           text:"军事训练",
   
       },
        {
           id:9,
           text:"安全管理",
   
       },
        {
           id:10,
           text:"人力资源",
   
       },
        {
           id:11,
           text:"营房实力",
   
       },
        {
           id:12,
           text:"固定资产",
   
       },
        {
           id:13,
           text:"储备资源",
   
       },
        {
           id:14,
           text:"委托监管",
   
       },
        {
           id:15,
           text:"社会化保障",
   
       },
        {
           id:16,
           text:"疫情防控",
   
       },
       ]
     }
    },
 methods: {
     openRouter(id){
         this.indeid=id
     }
 }
}
</script>

<style lang="scss" scoped>
.content{
    padding-top: 20px;
    height: 93vh !important;
    width: 300px;
    background: #fff;
    padding-right: 10px;
    padding-left: 10px;
}
.item-content{
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;

 border-radius: 4px;
 cursor: pointer;
}
.item-left{
    padding-left: 20px;
    font-size: 18px;
    font-weight: 550;

    color: rgb(199, 199, 199)
}
.item-right{
    padding-right: 20px;
}
.item-cahilder{
    cursor: pointer;
    padding-left: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    color: rgb(168, 168, 168);
}
.itemblgcolor{
    .item-left{
 color: #fff !important;
    }
   
    background: rgb(6, 158, 125);
}
</style>